<template>
  <div class="container">
    <div class="content">
      <div class="content-setting-card">
        <el-card style="width: 90%; height: 400px; margin: 20px 0px;">
          <template #header>
            <div class="card-header">
              <span>{{ basicsSetting.name }}</span>
            </div>
          </template>
          <div class="basics-setting">
            <div v-for="s in basicsSetting.settingContentListVO" :key="s.id">
              <span>{{ s.name }}&nbsp;{{s.briefIntroduction}}</span>
              <el-switch v-model=s.status @click="handleActive(s)" />
            </div>
          </div>
        </el-card>

        <el-card style="width: 90%; height: 400px; margin: 20px 0px;">
          <template #header>
            <div class="card-header">
              <span>{{ advancedSetting.name }}</span>
            </div>
          </template>
          <div class="advanced-setting">
            <div v-for="s in advancedSetting.settingContentListVO" :key="s.id">
              <span>{{s.name}}&nbsp;{{s.briefIntroduction}}</span>
              <el-switch v-model=s.status @click="handleActive(s)" />
            </div>
            <div class="advanced-setting-3">
              <span>隐私收藏夹密码设置&nbsp;(该设置用于设置用户隐私收藏夹的密码)</span>
              <el-button @click="handleUpdatePassword" type="primary">修改隐私密码</el-button>
            </div>
          </div>
        </el-card>

        <el-card style="width: 90%; height: 400px; margin: 20px 0px;">
          <template #header>
            <div class="card-header">
              <span>关于我们</span>
            </div>
          </template>
          <pre>
页面设计人员：yyy

前端开发人员：jjj

后端开发人员：lll

联系方式：yyyqq.com；jjjqq.com；lllqq.com
          </pre>
        </el-card>
      </div>
    </div>

    <el-dialog
      v-model="dialogVisible"
      title="修改对应隐私收藏夹密码"
      width="500"
      :before-close="handleClose"
    >
      <div style="margin-bottom: 20px;">16位密码, 包含大小写字母、数字、特殊字符(!@#$%^&*)</div>
      <el-input type="password" v-model="updatePassword.oldPassword" :clearable="true" style="margin-bottom: 20px;">
        <template #prepend>
          原密码
        </template>
      </el-input>
      <el-input type="password" v-model="updatePassword.newPassword" :clearable="true">
        <template #prepend>
          新密码
        </template>
      </el-input>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import {ref, reactive} from 'vue'
import { SettingContentItem, type BasicsSettingItem, type AdvancedSettingItem }from '@/types/settingInterface.ts';
import {settingApi} from '@/api/setting.js'
import {collectApi} from '@/api/collect.js'
import { ElMessage } from 'element-plus'

//### 定义变量 ###
const router = useRouter();
const dialogVisible = ref(false); //是否显示对话框
const updatePassword = ref({
  oldPassword: "",
  newPassword: ""
});

//基础设置
const basicsSetting = reactive<BasicsSettingItem>({
  name:"基础设置",
  settingContentListVO: []
})

//高级设置
const advancedSetting = reactive<AdvancedSettingItem>({
  name:"高级设置",
  settingContentListVO: []
})

//### 定义方法 ###
//页面初始化方法
const pageInitialization = async () => {
  const result = await settingApi.getSettingJson();
  console.log("设置初始化数据", result.data);
  if(result.code === 200) {
    Object.assign(basicsSetting, result.data.allSettingVO.basicsSettingVO);
    Object.assign(advancedSetting, result.data.allSettingVO.advancedSettingVO);
  }
}

pageInitialization();

//开关事件
const handleActive = async (s:SettingContentItem) => {
  // console.log("看看开关传递的数据:", s)
  const result = await settingApi.updateSettingContent({
    "id": s.id,
    "status": s.status
  });
  if(result.code === 200) {
    ElMessage({
      type: 'success',
      message: `设置成功`,
    })
    s.status = result.data.status;
    if(s.name === "持久化夜间模式") { //开启持久化夜间模式
      if(s.static) {
        window.localStorage.setItem('tenSeekIsDarkmode', true + ''); 
      }else { //关闭
        window.localStorage.removeItem('tenSeekIsDarkmode');
        router.push({
          name: 'home'
        });
      }
    }
  }else {
    ElMessage({
      type: 'warning',
      message: `设置失败`,
    })
    s.status = !s.status;  //因为数据库同步失败了所有复原
  }
}

//点击 x 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
}

//处理修改密码的操作
const handleUpdatePassword = () => {
  dialogVisible.value = true;
}

//弹窗确定提交修改密码
const handleConfirm = async () => {
  if(updatePassword.value.newPassword === "" || updatePassword.value.oldPassword === "") {
    ElMessage({
      type: 'warning',
      message: `密码不能为空`,
    })
    return;
  }
  const result = await collectApi.updatePassword(updatePassword.value);
  if(result.code === 200) {
    updatePassword.value.oldPassword = "";
    updatePassword.value.newPassword = "";
    ElMessage({
      type: 'success',
      message: `密码修改成功`,
    })
    dialogVisible.value = false;
  }else {
    ElMessage({
      type: 'warning',
      message: `旧密码错误或新密码不合法`,
    })
    updatePassword.value.oldPassword = "";
    updatePassword.value.newPassword = "";
  }
}
</script>


<style scoped lang="scss">
.container {
  // background: green;
  height: 85vh;

  .content {
    overflow: auto;
    // background: red;
    width: 100%;
    height: 100%;

    .content-setting-card {
      display: flex;
      flex-direction: column;
      align-items: center;

      .basics-setting {
        display: flex;
        flex-direction: column;
      }

      .basics-setting > * { //选中父元素下面的所有一级子元素
        display: flex;
        justify-content: space-between;
        align-items: center; /* 副轴居中 */
        margin-top: 20px;
      }

      .advanced-setting {
        display: flex;
        flex-direction: column;
      }

      .advanced-setting > * {
        display: flex;
        justify-content: space-between;
        align-items: center; /* 副轴居中 */
        margin-top: 20px;
      }

    }
  }
}
</style>